<template>
  <div>
    <div class="page">
      <TopBar title="我的订单"></TopBar>
    </div>
    <div class="ding" v-for="(x,i) in order" :key="i">
      <div>{{x.order_num}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{x.status_name}}</div>
      <Row class="header">
      <Col span="9">
        <img class="img" :src="x.fid.f_img">
        
      </Col>
      <Col span="15">
        <div class="title">{{x.fid.f_name}}</div>
        <div class="desc">{{x.fid.burdening}}</div>
        <div class="author">￥ {{x.fid.price}}.00 元</div><br/>
      </Col>
    </Row>
    <div class="dada">
      <el-button type="primary">确认收货</el-button>
    </div>
    </div>

    <BottomBar :index="2"></BottomBar>
  </div>
</template>

<script>
import Book from "@/components/Book";
import BottomBar from "@/components/BottomBar";
import TopBar from "@/components/TopBar";
export default {
  name: "MyBookView",
  data(){
    return{
      order:[],
    }
  },
  components: {
    Book,
    BottomBar,
    TopBar,
  },
  mounted(){
    this.getorder()
  },
  methods:{
    getorder(){
      this.$axios.get('customer/order/',{
        headers:{
          'Authorization':localStorage.getItem('token') || ''
        }
      }).then(res => {
          console.log('>>>>>>>>>',res.data.data)
          this.order = res.data.data
        })
    }
  }
}
</script>

<style scoped>
.books {
  width: 90%;
  margin: 20px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.book {
  margin: 0 15px;
}

.ding{
  margin-left: 20px;
  margin-top: 20px;
}
.dada{
  text-align: right;
  margin-right: 20px;
}
.img{
  width: 130px;
  border-radius: 20px;
}
</style>

